<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">

    <title>H+ 智慧教育平台 - 机构列表</title>

    <meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
    <meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">

    <!--[if lt IE 9]>
    <meta http-equiv="refresh" content="0;ie.html"/>
    <![endif]-->

    <link rel="shortcut icon" href="../../static/favicon.ico" th:href="@{/static/favicon.ico}">
    <link href="../../static/css/bootstrap.min.css?v=3.3.6" th:href="@{/static/css/bootstrap.min.css(v='3.3.6')｝"
          rel="stylesheet">
    <link href="../../static/css/font-awesome.min.css?v=4.4.0" th:href="@{/static/css/font-awesome.min.css(v='4.4.0')}"
          rel="stylesheet">
    <link href="../../static/css/animate.css" th:href="@{/static/css/animate.css}" rel="stylesheet">
    <link href="../../static/css/style.css?v=4.1.0" th:href="@{/static/css/style.css(v='4.1.0')}" rel="stylesheet">
    <link href="../../static/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <!-- 弹出框插件 -->
    <link href="../../static/css/plugins/sweetalert/sweetalert.css"
          th:href="@{/static/css/plugins/sweetalert/sweetalert.css}" rel="stylesheet">
    <style type="text/css">
        .table > thead > tr > th {
            color: #2a62bc;
        }


    </style>

</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">

    <form class="form-inline">
        <div class="form-group">
            <label>机构名称:</label>
            <input type="text" name="institutional_name" class="form-control" id="name">
        </div>
        <div class="form-group">
            <label>&nbsp;&nbsp;机构类型:</label>
            <div class="input-group">
                <input type="text" class="form-control org">
                <div class="input-group-btn">
                    <button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu dropdown-menu-right" role="menu">
                    </ul>
                </div>
                <!-- /btn-group -->
            </div>
        </div>
        <button class="btn-success btn">查询</button>
        <div style="float: right">
            <!-- Button trigger modal -->
            <button type="button" class="btn btn-success " data-toggle="modal" data-target="#myModal">
                添加
            </button>
            <!-- Modal -->
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                    aria-hidden="true">&times;</span>
                            </button>
                            <h4 class="modal-title" id="add">增加</h4>
                        </div>
                        <div class="modal-body form-horizontal">
                            <div class="form-group">
                                <label class="col-sm-2 control-label">机构名称</label>
                                <div class="col-sm-4">
                                    <input type="text" class="form-control" placeholder="请输入机构名称" name="add_content">
                                </div>
                            </div>
                            <div class="form-group form-inline">
                                <label class="col-md-2 control-label">机构类型</label>
                                <div class="col-md-4">
                                    <select class="form-control">
                                        <option value="学校">学校</option>
                                        <option value="培训机构">培训机构</option>
                                    </select>
                                </div>
                            </div>
                            <!--footer-->
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">
                                    关闭
                                </button>
                                <button type="submit" class="btn btn-primary"
                                        id="update_teacher_btn">保存
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <button type="submit" id="delete" class="btn btn-danger">删除</button>
        </div>
    </form>
    <!--表单-->
    <table class="table table-striped" id="myTab">
        <!--模态框-->
        <div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span>
                        </button>
                        <h4 class="modal-title" id="change">修改</h4>
                    </div>
                    <div class="modal-body form-horizontal">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">机构名称</label>
                            <div class="col-sm-4">
                                <input type="text" class="form-control" name="add_content">
                            </div>
                        </div>
                        <div class="form-group form-inline">
                            <label class="col-md-2 control-label">机构类型</label>
                            <div class="col-md-4">
                                <select class="form-control">
                                    <option value="学校">学校</option>
                                    <option value="培训机构">培训机构</option>
                                </select>
                            </div>
                        </div>
                        <!--footer-->
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            <button type="button" class="btn btn-primary">保存</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </table>
</div>
<!-- 全局js -->
<script src="../../static/js/jquery.min.js?v=2.1.4" th:src="@{/static/js/jquery.min.js(v='2.1.4')}"></script>
<script src="../../static/js/bootstrap.min.js?v=3.3.6" th:src="@{/static/js/bootstrap.min.js(v='3.3.6')}"></script>
<!-- 自定义js -->
<script src="../../static/js/content.js?v=1.0.0" th:src="@{/static/js/content.js(v='1.0.0')}"></script>
<!--bootstrap-table-->
<script src="../../static/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="../../static/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
<script src="../../static/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="../../static/js/plugins/suggest/bootstrap-suggest.min.js"></script>
<!-- 弹出框插件 -->
<script src="../../static/js/plugins/sweetalert/sweetalert.min.js"
        th:href="@{/static/js/plugins/sweetalert/sweetalert.min.js}"></script>

<script>
    $(function () {
        $("#myTab").bootstrapTable({
            url: "../../static/js/demo/organization/orgList.json",
            toolbar: '#toolbar', // 工具按钮用哪个容器
            pagination: true, //是否显示分页
            striped: true, //是否启用行间隔色
            cache: false,
            method: "post",
            sortable: true, //是否启用排序
            sortOrder: "asc", // 排序方式
            sidePagination: "client", // 分页方式：client客户端分页，server服务端分页（*）
            pageNumber: 1,
            pageSize: 3, //每页的页数
            pageList: [3, 6, 9, 12],
            /*  search:true,*/
            strictSearch: false,                 //查询时是否严格匹配, true表示严格匹配，false表示模糊匹配
            clickToSelect: true, //是否选中
            /* showRefresh:true,*/
            uniqueId: "ID",
            columns: [{
                field: 'checked',
                checkbox: true, /* 是否添加复选框*/
                //跟据返回每行的数据
                formatter: function (value, row, index) {
                    return row.id;
                }
            },
                {
                    field: 'institutional_name',
                    title: '机构名称'
                },
                {
                    field: 'institutional_type',
                    title: '机构类型'
                },
                {
                    field: 'creation_time',
                    title: '创建时间',
                },
                {
                    field: 'operator',
                    title: '操作',
                    align: 'center',
                    valign: 'middle',
                    width: '10%',
                    // visible: false,
                    formatter: function (value, row, index) {
                        // var sid_code = base64encode(row.sid + '');   //  sid 加密处理
                        // alert(sid_code);
                        return '<a  data-toggle="modal" data-target="#updateModal" title="修改">' +
                            '<i class="glyphicon glyphicon-edit"></i> ' +
                            '</a>' +
                            '<a href="javascript:void(0)" title="删除">' +
                            '<i class="glyphicon glyphicon-trash text-danger"></i> ' +
                            '</a>';
                    },
                    events: {
                        'click a[title=删除]': function (e, value, row, index) {
                            swal({
                                title: "您确定要删除该信息吗？",
                                type: "warning",
                                showCancelButton: true,
                                confirmButtonColor: "#DD6B55",
                                confirmButtonText: "删除",
                                closeOnConfirm: false
                            }, function () {
                                swal("删除成功！", "您已经永久删除信息", "success");
                            });
                        },
                    }
                }]
        });
        //通过json显示文本框数据
        var testdataBsSuggest1 = $(".org").bsSuggest({
            indexId: 2, //data.value 的第几个数据，作为input输入框的内容
            indexKey: 1, //data.value 的第几个数据，作为input输入框的内容
            //TODO 通过json显示数据
            data: {
                'value': [
                    {
                        'id': "",
                        'word': '学校',
                    },
                    {
                        'id': "",
                        'word': '培训机构',
                    }
                ]
            }
        })
        //删除
        $('#delete').click(function () {
            let idlist = $('#myTab').bootstrapTable('getAllSelections');
            console.log(idlist);
            let ids = JSON.stringify(idlist);
            if (idlist.length === 0) {
                alert("请至少选择一个")
            } else {
                if (confirm("确定删除这些数据么")) {
                    alert("删除:" + ids);
                    window.location.reload();
                    //ajax发送异步请求
                    /*$.ajax({
                        url:  appName,
                        method: "post",
                        data: idlist,
                        dataType: "text",
                        async: "true",
                        contentType: "application/json",
                        success: function (data) {
                            /!*重新加载本页面*!/
                            alert(data);
                            window.location.reload();
                        },
                        error: function (jqXRH) {
                            console.log(jqXRH);
                            alert("删除失败")
                        }
                    })*/
                }
            }


        });


    });
</script>

</body>

</html>
